/* ============================================================
   ЕГЭ Налегке — Чек-лист недели, СТИЛИ
   Версия 3.0 (27.08.2026)

   КУДА: в тему GetCourse (вкладка CSS).
   ЗАЧЕМ отдельно от JS: тема грузится в HEAD и применяется
   мгновенно, поэтому ученик видит оформленный скелет карточки
   с первого кадра, ещё до того как отработает скрипт.

   Шрифты (Raleway, Golos Text, NauryzRedKeds, Defectica)
   подключены глобально в настройках аккаунта — здесь только
   ссылки на них через font-family.

   ДЛЯ ИСТОРИИ меняется ТОЛЬКО первый блок переменных
   «ТЕМА ПРЕДМЕТА». Всё остальное общее для обоих предметов.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   ЧЕК-ЛИСТ — этот блок целиком уезжает в тему GetCourse
   ══════════════════════════════════════════════════════════ */
.enl-checklist-root,
.enl-debts-root{

  /* ⚠️ Тот же блок переменных обслуживает и страницу долгов.

     Страница долгов — не копия чек-листа, а его младший брат:
     карточка, плашки, кружки, теги и галочки там те же самые.
     Все правила ниже написаны без привязки к корню, поэтому
     достаточно раздать переменные обоим корням — и вёрстка
     достаётся долгам даром. Дублировать триста строк ради
     второй страницы было бы способом развести их со временем.

     Класс темы вешается вторым так же: enl-debts-root enl-theme-obsh.

     ⚠️ Цвета предмета здесь НЕ задаются. Они приходят из класса
     темы, который вешается на этот же элемент вторым классом:

         enl-checklist-root enl-theme-obsh
         enl-checklist-root enl-theme-hist

     Сделано намеренно: если класс темы забыли, чек-лист останется
     без цветов и это будет видно сразу. Если бы обществознание
     стояло значением по умолчанию, история молча отрисовалась бы
     чужими цветами — и никто бы не заметил.

     Ниже — только структура, общая для обоих предметов.          */

  /* ─── СТРУКТУРА ───────────────────────────────────────
     Общее для обоих предметов.                          */
  --enl-font:          'Raleway', sans-serif;
  --enl-font-title:    'NauryzRedKeds', sans-serif;
  --enl-font-badge:    'Golos Text', 'Raleway', sans-serif;

  --enl-card-bg:       #FFFFFF;
  --enl-card-radius:   32px;
  --enl-card-pad-x:    27px;
  /* Тень из макета целиком, все шесть слоёв. Слабые дают мягкий
     ореол вокруг карточки — без них край выглядит резким.       */
  --enl-card-shadow:   109.2px 104.9px 60.0px rgba(146,146,146,.01),
                       60.0px 60.0px 51.4px rgba(146,146,146,.01),
                       27.8px 25.7px 38.5px rgba(146,146,146,.09),
                       6.4px 6.4px 21.4px rgba(146,146,146,.10);

  --enl-text:          #161616;
  --enl-text-muted:    #B5B0A4;
  --enl-divider:       #DBDAD5;   /* точный цвет из макета */
  --enl-lock:          #AAAAAA;   /* дужка и корпус замка */
  --enl-lock-bg:       #ECECEC;   /* заливка кружка — как в текущем коде */
  --enl-lock-border:   #D1D1D1;
  /* Пропорции из текущего кода: дужка 8×6 обводкой 2px и скруглением 4px,
     корпус 10×7. Высота значка = дужка + корпус − 0.5 нахлёста.        */
  --enl-lock-arch-w:   8px;
  --enl-lock-arch-h:   5.5px;
  --enl-lock-arch-b:   2px;
  --enl-lock-arch-r:   4px;
  --enl-lock-body-w:   11px;
  --enl-lock-body-h:   8px;
  --enl-lock-body-r:   3px;
  --enl-lock-h:        13px;   /* 5.5 + 8 − 0.5 */

  --enl-size-month:    20px;
  --enl-size-title:    30px;
  --enl-size-dates:    20px;
  --enl-size-badge:    17px;
  --enl-size-item:     16px;
  --enl-size-tag:      16px;

  --enl-dot:           21px;   /* кружок статуса */
  --enl-dot-border:    1.5px;
  --enl-dot-mark:      6px;    /* точка «обязательное»: ПОЛНЫЙ габарит
                                  вместе с обводкой (в исходнике 7px) */
  --enl-dot-mark-ring: 1px;    /* толщина белой обводки (было 1.5px) */
  --enl-dot-mark-r:    9.75px; /* НА ЧЁМ стоит центр точки, считая от
                                  центра кружка. 9.75 = середина линии
                                  кружка, точка сидит на ней верхом.
                                  9 = внутренний край, 10.5 = внешний,
                                  больше 10.5 = точка отрывается наружу */
  --enl-item-gap:      12px;   /* между кружком и текстом, и между пунктами */
  --enl-item-line:     20px;   /* line-height пункта, фиксируем в px ради маркера */
  --enl-tag-zone:      128px;  /* колонка под тег дедлайна: правее этой
                                  границы текст названия не заходит,
                                  даже если тег в строке узкий.

                                  Самый широкий тег («14.09 в 17:00»)
                                  занимает около 88px, остальное —
                                  воздух между текстом и тегом.
                                  Больше значение = больше воздуха и
                                  раньше перенос, меньше = наоборот. */

  /* Плашка при наведении. Была в версии до макета и потерялась при
     переносе: в макете строки плотные, паддинги я убрала, а вместе
     с ними ушёл и ховер. Здесь паддинг компенсируется отрицательным
     полем — плашка растёт наружу, а раскладка не съезжает: кружки
     остаются на одной линии с плашками секций.                    */
  --enl-hover-pad-x:   12px;
  --enl-hover-pad-y:    5px;
  --enl-hover-radius:  10px;

  /* Галочки. Значения сняты ПИКСЕЛЬНО с отрисованного макета,
     а не пересчётом из координат узлов Figma — пересчёт дал ошибку
     (см. ниже, почему). Всё приведено к кружку 21px.

     Светлая галочка видна целиком (лежит сверху), поэтому эталон — она:
       размер     22.91 × 22.91   ← БОЛЬШЕ кружка, а не вровень с ним
       левый край −2.55 от левого края кружка
       верх       −6.36 от верха кружка
       низ        −4.45 над низом кружка
       остриё      6.55 от центра кружка

     Тёмная — та же форма, сдвинута ровно на +6 по X (из SVG макета),
     Y тот же. Её видимый bbox в макете меньше только потому, что
     светлая перекрывает её в месте пересечения.

     ПОЧЕМУ РАНЬШЕ БЫЛО ВЫШЕ: я взяла размер галочки из размера узла
     Figma (21.019) и приравняла его к размеру кружка. На отрисовке
     галочка оказалась 22.9 — на 9% крупнее. Из-за меньшего размера
     остриё поднималось: было 7.14 над низом кружка вместо 4.45.     */
  --enl-check-size:      22.91px;
  --enl-check-top:       -6.36px;
  --enl-check-light-x:   -2.55px;
  --enl-check-dark-x:     3.45px;   /* = светлая + 6 */
  --enl-check-one-x:      0.45px;   /* середина между ними */

  /* Маркер. Из макета: Rectangle 2739 (201, 700) 297×11,
     текст пункта (206, 695.5) высотой 16.
       → начинается на 5px раньше текста, высота полосы 11px.
     Конец не доходит до текста и срезан по диагонали — как след
     от скошенного кончика маркера.                              */
  --enl-marker-h:      11.5px; /* высота полосы */
  --enl-marker-y:      5px;    /* от верха строки до верха полосы */
  --enl-marker-lead:   6px;    /* заход левее первой буквы */
  --enl-marker-gap:    5px;    /* НЕ доходит до конца текста */
  --enl-marker-tip:    18px;   /* ширина скошенного кончика */
  --enl-marker-slant:  110deg; /* наклон среза */

  /* ── Вертикальный ритм карточки ────────────────────────
     Считан от координат макета (верх карточки y=460):
       верх карточки → месяц      27
       месяц   (h 23) → заголовок 21
       заголов.(h 33) → даты       7
       даты    (h 23) → линия     16
       линия          → плашка    21
       плашка  (h 30) → список    30
       список         → плашка 2  86 → сокращено до 48
     Высоты строк заданы в px, а не множителем: тогда ритм не
     зависит от метрик шрифта и не поедет при подстановке
     запасного, если основной не загрузился.                */
  --enl-lh-month:      23px;
  --enl-lh-title:      33px;
  --enl-lh-dates:      23px;
  --enl-gap-month:     21px;
  --enl-gap-title:      7px;
  --enl-gap-dates:     16px;
  --enl-gap-divider:   21px;
  --enl-gap-badge:     30px;
  /* 86px — значение из макета, но там обе секции были пустыми
     заглушками. На реальном контенте разрыв читается как обрыв
     карточки. Сокращено до 48px.                              */
  --enl-gap-section:   48px;

  /* Плашка секции: высота фиксирована, текст центрируется флексом.
     --enl-badge-optical поднимает текст: центрирование выравнивает
     строчный бокс, а он у большинства шрифтов сидит оптически низко
     из-за места под выносные элементы. Значение в em, чтобы
     масштабировалось вместе с кеглем.                          */
  --enl-badge-h:       30px;
  --enl-badge-pad-x:   21px;
  /* На сколько поднять текст в плашке. Единственное значение,
     которое нельзя вычислить: браузер центрирует строчный бокс, а
     глаз читает по основной строке (от верха строчных до базовой
     линии). Разница между ними зависит от метрик конкретного шрифта
     и в CSS не измеряется. Подбирается глазом один раз.          */
  --enl-badge-rise:    1px;      /* подобрано глазом 27.08.2026 */

  --enl-row-h:         23px;   /* высота строки пункта из макета */


  /* ── Слайдер — раскладка снята с макета ────────────────
     Замеры (x / ширина, экран 1440):
       левый боковой лист    83 … 131   → 48px
       зазор                131 … 146   → 15px
       АКТИВНАЯ КАРТОЧКА    146 … 822   → 676px
       зазор                822 … 837   → 15px
       правый боковой лист  837 … 885   → 48px
       ─────────────────────────────────────────────
       вся зона слайдера     83 … 885   → 802px

     Высота боковых листов 967.2 против 1047 у активного = 92.4%,
     по вертикали отцентрованы относительно карточки (оба центра 983.5).
     То есть активный лист ВЫШЕ соседних, а не вровень с ними.

     Стрелки лежат НА боковых листах, а не рядом:
       левая стрелка 80…131 при листе 83…131 — совпадают краями.

     Боковые листы стоят РЯДОМ с карточкой через зазор, они не
     выглядывают из-под неё. Значит обрезка не нужна вообще —
     и overflow:hidden здесь ставить нельзя, он срезает тень.   */
  --enl-widget-max:    802px;  /* 48 + 15 + 676 + 15 + 48 */

  /* Горизонталь — в процентах, а не в пикселях (правило из лога 14.9).
     Проценты взяты из макета от всей зоны слайдера 802px:
       боковой лист  48 / 802 = 5.99%
       лист + зазор  63 / 802 = 7.86%
       карточка     676 / 802 = 84.3%  ← получается сама собой
     Так карточка держит долю макета в колонке любой ширины.
     Если задать эти отступы в px, на узкой колонке они съедят
     непропорционально много, и карточка станет узкой полоской. */
  --enl-side-w:        5.99%;  /* видимая ширина бокового листа */
  --enl-side-space:    7.86%;  /* лист + зазор до карточки */

  /* Насколько зона слайдера выходит за колонку с каждой стороны.
     В макете зона шире колонки: 802 против 758 → (802−758)/2 = 22px.
     Это не произвол: боковые листы размыты и растворяются к краю,
     поэтому без выпуска блок визуально уже соседних, хотя формально
     занимает ту же колонку.
     Задан долей, а не пикселями: съедаемая растворением ширина
     пропорциональна (≈0.45 от ширины листа, а лист — доля зоны),
     значит и компенсация должна расти вместе с колонкой.
     22 / 758 = 2.9%. Если предок режет по overflow — уменьшить. */
  --enl-widget-bleed:  2.9%;
  --enl-side-inset:    3.8%;   /* (100 − 92.4) / 2 — насколько лист ниже */
  /* Мягкий дальний край боковых листов.
     ВАЖНО: размывать содержимое бесполезно — в окно шириной 48px
     попадает край карточки, а он почти пустой белый. Размывать там
     нечего, что и показала проверка.
     Мягким в макете выглядит САМ КРАЙ ЛИСТА — граница белого листа
     с кремовым фоном. Значит нужен не blur, а растворение: лист
     сходит на нет к дальнему краю. Ближний край при этом остаётся
     чётким, со скруглением и тенью.                               */
  /* Прозрачность СОДЕРЖИМОГО боковых листов. Задаётся отдельно от
     самого листа: лист должен остаться белым и с тенью, а уроки
     внутри — приглушёнными, иначе соседние недели спорят с текущей
     за внимание.                                                  */
  --enl-side-content:  .35;

  --enl-side-fade-a:   0%;    /* у дальнего края лист полностью прозрачен */
  --enl-side-fade-b:   45%;   /* здесь он уже полностью непрозрачен */
  --enl-side-opacity:  1;
  --enl-arrow-size:    51px;
  --enl-arrow-top:     59%;    /* центр стрелки по высоте карточки, из макета */
  --enl-arrow-glyph:   21px;   /* высота шеврона — в макете он занимает
                                  заметную часть кружка, а не мелкий значок */
  --enl-speed:         .3s;
}

/* ══════════════════════════════════════════════════════════
   ТЕМЫ ПРЕДМЕТОВ
   Правила вёрстки НЕ дублируются — они написаны один раз ниже
   и работают через переменные. Здесь только значения.
   Добавить третий предмет = добавить ещё один такой блок.
   ══════════════════════════════════════════════════════════ */

/* ── ОБЩЕСТВОЗНАНИЕ ── */
.enl-theme-obsh{
  --enl-accent:        #B01513;  /* заголовок «задачи на неделю» */
  --enl-badge-bg:      #D9DC6A;  /* плашка секции */
  --enl-badge-text:    #161616;
  --enl-tag-bg:        #FFF7BD;  /* тег дедлайна */
  --enl-tag-text:      #000000;
  --enl-marker:        #FCCBD1;  /* маркер на выполненном */
  --enl-hover-bg:      #F7F4EA;  /* плашка пункта при наведении */
  --enl-check-1:       #999D1B;  /* нижняя галочка */
  --enl-check-2:       #BABE36;  /* верхняя галочка */
  --enl-arrow-bg:      #FBDDE3;
  --enl-arrow-border:  #161616;
  /* Блок долгов красится тем же цветом, что и кружок стрелки:
     это единственный «фирменный» фон предмета в чек-листе, и
     повторить его дешевле, чем вводить пятый цвет.          */
  --enl-debts-bg:      #FBDDE3;
  --enl-debts-border:  #E8A9B6;  /* тот же тон, темнее — для пунктира */
}

/* ── ИСТОРИЯ ──
   Экран 7113:111764. Структура чек-листа идентична обществознанию.
   Отличий по цвету всего три: заголовок, маркер и заливка кружка
   у стрелок. Плашки, теги дедлайнов, галочки и сама стрелка —
   те же самые.                                                  */
.enl-theme-hist{
  --enl-accent:        #7C2329;  /* заголовок — тёмно-бордовый */
  --enl-badge-bg:      #D9DC6A;  /* тот же, что у обществознания */
  --enl-badge-text:    #161616;  /* тот же */
  --enl-tag-bg:        #FFF7BD;  /* тот же */
  --enl-tag-text:      #000000;  /* тот же */
  --enl-marker:        #D9EBFF;  /* маркер — голубой вместо розового */
  --enl-hover-bg:      #F7F4EA;  /* плашка пункта при наведении */
  --enl-check-1:       #999D1B;  /* галочки идентичны обществознанию */
  --enl-check-2:       #BABE36;  /* галочки идентичны обществознанию */
  --enl-arrow-bg:      #C2D4E8;  /* заливка кружка стрелки — голубая */
  --enl-arrow-border:  #161616;  /* сама стрелка та же, чёрная */

  /* Блока долгов в макете нет — цвет взят от кружка стрелки,
     как и у обществознания.                                  */
  --enl-debts-bg:      #C2D4E8;
  --enl-debts-border:  #93B3D4;  /* тот же тон, темнее — для пунктира */
}

/* ⚠️ Без этого кружок 21px + рамка 1.5px давал 24px, и всё, что
   позиционировалось относительно него, уезжало на 3px. */
.enl-checklist-root,
.enl-checklist-root *,
.enl-checklist-root *::before,
.enl-checklist-root *::after,
.enl-debts-root,
.enl-debts-root *,
.enl-debts-root *::before,
.enl-debts-root *::after{box-sizing:border-box}

.enl-widget{
  font-family:var(--enl-font);color:var(--enl-text);
  max-width:var(--enl-widget-max);
  margin:0 auto;      /* центрирование не трогаем */
}

/* ── Слайдер ──
   Ни overflow:hidden, ни маскирования: тени карточки и боковых
   листов должны дышать, иначе снизу появляется прямая обрезка. */
/* Выпуск за колонку — отрицательными полями, а НЕ шириной с margin-left.
   Отрицательные поля с двух сторон расширяют блок симметрично и не
   ломают центрирование родителя.                                    */
.enl-slider{
  position:relative;
  padding:0 var(--enl-side-space);
  margin-left:calc(-1 * var(--enl-widget-bleed));
  margin-right:calc(-1 * var(--enl-widget-bleed));
}

/* Боковые листы.
   ВНУТРИ — настоящий контент соседних недель, он никуда не делся.
   Меняется только подача: лист показывает КРАЙ карточки, а не её
   уменьшенную копию.

   Скругление только с внутренней стороны — со стороны карточки.
   Внешний край прямой: в макете он размыт и намекает, что лист
   продолжается дальше, а не заканчивается пилюлей.

   overflow:hidden здесь допустим и нужен — он режет только внешний
   край внутри самого листа. Тень листа задана на нём самом и
   наружу не обрезается.                                          */
.enl-side{
  position:absolute;top:var(--enl-side-inset);bottom:var(--enl-side-inset);
  width:var(--enl-side-w);
  background:var(--enl-card-bg);
  box-shadow:var(--enl-card-shadow);
  opacity:var(--enl-side-opacity);
  overflow:hidden;pointer-events:none;
}
.enl-side--left {left:0; border-radius:0 var(--enl-card-radius) var(--enl-card-radius) 0}
.enl-side--right{right:0;border-radius:var(--enl-card-radius) 0 0 var(--enl-card-radius)}

/* Растворение дальнего края. Маска применяется к самому листу,
   поэтому вместе с ним растворяется и его тень — у дальнего края
   она исчезает, у ближнего остаётся. Ровно как в макете.        */
.enl-side--left{
  -webkit-mask-image:linear-gradient(to right, transparent var(--enl-side-fade-a), #000 var(--enl-side-fade-b));
          mask-image:linear-gradient(to right, transparent var(--enl-side-fade-a), #000 var(--enl-side-fade-b));
}
.enl-side--right{
  -webkit-mask-image:linear-gradient(to left, transparent var(--enl-side-fade-a), #000 var(--enl-side-fade-b));
          mask-image:linear-gradient(to left, transparent var(--enl-side-fade-a), #000 var(--enl-side-fade-b));
}

/* Внутри лежит карточка полной ширины, прижатая к нужному краю:
   левый лист показывает её ПРАВЫЙ край, правый — ЛЕВЫЙ.
   Содержимое соседних недель здесь настоящее, просто в 48px
   попадает только край карточки.                              */
.enl-side-inner{
  position:absolute;top:0;width:var(--enl-card-w-ref,676px);
  opacity:var(--enl-side-content);
}
.enl-side--left  .enl-side-inner{right:0}
.enl-side--right .enl-side-inner{left:0}
.enl-side-inner .enl-slide-body{box-shadow:none}

.enl-stage{position:relative}
.enl-card{display:none}
.enl-card--active{display:block;animation:enl-fade .25s ease-out}
@keyframes enl-fade{from{opacity:.5}to{opacity:1}}

/* ── Карточка ── */
.enl-slide-body{
  background:var(--enl-card-bg);
  border-radius:var(--enl-card-radius);
  box-shadow:var(--enl-card-shadow);
  padding:27px var(--enl-card-pad-x) 34px;
  width:100%;box-sizing:border-box;   /* высота тянется до самого высокого слайда */
}

.enl-slide-month{
  font-size:var(--enl-size-month);line-height:var(--enl-lh-month);
  font-weight:600;text-transform:lowercase;text-align:center;color:#000;
  margin:0 0 var(--enl-gap-month);
}
.enl-slide-title{
  font-family:var(--enl-font-title);font-size:var(--enl-size-title);
  line-height:var(--enl-lh-title);font-weight:700;text-align:center;
  color:var(--enl-accent);letter-spacing:.6px;text-transform:lowercase;
  margin:0 0 var(--enl-gap-title);
}
/* .enl-debts-sub — подпись под заголовком на странице долгов.
   Стоит в одном правиле с датами недели НАМЕРЕННО: это одно и
   то же место в карточке, и выглядеть оно должно одинаково.
   Отдельное правило у долгов было — и шрифт разъехался.
   Правишь тут — меняются оба, так и задумано.               */
.enl-slide-dates,
.enl-debts-sub{
  font-size:var(--enl-size-dates);line-height:var(--enl-lh-dates);
  font-weight:600;text-align:center;color:var(--enl-text);
  letter-spacing:.4px;margin:0 0 var(--enl-gap-dates);
}
.enl-divider{height:1px;background:var(--enl-divider);border:0;
  margin:0 0 var(--enl-gap-divider)}
/* при карточке 676 и padding 27 ширина = 622px — совпадает с макетом (621.5) */

/* ── Плашка секции ── */
.enl-section+.enl-section{margin-top:var(--enl-gap-section)}
.enl-section-label{
  display:inline-flex;align-items:center;justify-content:center;
  height:var(--enl-badge-h);
  padding:0 var(--enl-badge-pad-x) calc(var(--enl-badge-rise) * 2);
  background:var(--enl-badge-bg);color:var(--enl-badge-text);
  font-family:var(--enl-font-badge);font-weight:500;
  font-size:var(--enl-size-badge);line-height:1;
  text-transform:lowercase;border-radius:25px;
  margin:0 0 var(--enl-gap-badge);
}

/* ── Список ── */
.enl-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--enl-item-gap)}
.enl-item-link{
  display:flex;align-items:center;gap:var(--enl-item-gap);
  min-height:var(--enl-row-h);
  /* Паддинг компенсирован отрицательным полем ПО ОБЕИМ осям.
     По горизонтали — чтобы кружки остались на одной линии с
     плашками секций. По вертикали — чтобы шаг строк остался
     макетным (23 + 12 = 35px), иначе каждая строка выросла бы
     на 10px, а карточка на восьми пунктах — на 80px.        */
  padding:var(--enl-hover-pad-y) var(--enl-hover-pad-x);
  margin:calc(-1 * var(--enl-hover-pad-y)) calc(-1 * var(--enl-hover-pad-x));
  border-radius:var(--enl-hover-radius);
  /* именно background-color, а не background: иначе в переход
     попадут и градиенты маркера на выполненных пунктах       */
  transition:background-color var(--enl-speed);
  text-decoration:none!important;color:inherit!important;
}
/* Только там, где курсор реально есть. На тач-устройствах ховер
   «залипает» после тапа — подсветка остаётся на уже открытом
   пункте и выглядит как ошибка.                               */
@media (hover:hover){
  .enl-item-link:hover{background-color:var(--enl-hover-bg)}
  .enl-locked .enl-item-link:hover{background-color:transparent}
}
.enl-item-check{
  flex:0 0 var(--enl-dot);width:var(--enl-dot);height:var(--enl-dot);
  border-radius:50%;position:relative;
  display:flex;align-items:center;justify-content:center;
  border:var(--enl-dot-border) solid var(--enl-text);
  background:transparent;
}
/* Название не должно залезать в зону дедлайнов.

   Раньше оно тянулось до самого тега: тег узкий — текст заезжает
   правее, тег широкий — обрывается раньше. Правый край получался
   рваным, и длинный пункт заканчивался дальше, чем у соседа
   сверху начинался тег.

   Теперь под тег зарезервирована колонка постоянной ширины, и
   текст упирается в её границу независимо от того, какой тег
   стоит в этой строке. Ограничение верхнее: если тег окажется
   шире колонки, название сожмётся само, как и раньше.

   Из 100% вычитаем кружок и два зазора — до названия и после. */
.enl-item-title{
  font-size:var(--enl-size-item);line-height:var(--enl-item-line);
  color:#000;flex:1;min-width:0;
  max-width:calc(100% - var(--enl-dot) - var(--enl-item-gap) * 2 - var(--enl-tag-zone));
}
.enl-item-type{font-weight:600}
.enl-item-text{position:relative;display:inline}

/* тег дедлайна */
.enl-item-tag{
  /* margin-left:auto — название больше не растягивается на всю
     строку и само тег вправо не выталкивает */
  flex:0 0 auto;margin-left:auto;
  background:var(--enl-tag-bg);color:var(--enl-tag-text);
  font-size:var(--enl-size-tag);line-height:1;
  padding:6px 10px 7px;border-radius:29px;white-space:nowrap;
}

/* ── СОСТОЯНИЯ ────────────────────────────────────── */

/* не начато — пустой кружок (единственное состояние, явно нарисованное в макете) */

/* обязательное — кружок + точка-индикатор.

   Точка с белой обводкой по диагонали справа сверху, ЦЕНТРОМ НА
   ЛИНИИ кружка — сидит на ней верхом и пересекает её. Так было
   в исходном варианте, так и оставляем. Часть точки при этом
   выходит за габарит кружка — это нормально и на вёрстку не
   влияет: элемент абсолютный, ряд держит flex:0 0 21px.

   ⚠️ Не пытаться «починить» силуэт. Пробовали четыре раза
   (по центру кружка; внутри рамки; касанием внешнего края с
   обводкой и без) — каждый раз хуже. Ощущение «кружок больше»
   лечится размером точки, а не её местом.

   Против исходника уменьшены габарит (6px против 7px) и обводка
   (1px против 1.5px). Красное ядро прежнее, 4px.

   ⚠️ --enl-dot-mark — это ПОЛНЫЙ габарит вместе с обводкой, а не
   размер ядра: из-за border-box ширина уже включает рамку.
   Красное ядро = габарит - обводка*2.

   ГДЕ СТОИТ ТОЧКА задаётся одним числом --enl-dot-mark-r:
   расстоянием от центра кружка до центра точки. Смещения по
   обеим осям считаются из него, поэтому диагональ 45° держится
   сама при любых значениях.

       9px    — центр точки на внутреннем крае линии
       9.75px — на середине линии       ← сейчас
       10.5px — на внешнем крае линии
       больше — точка отрывается от кружка наружу

   Формула в top/right: от центра padding-box (внутренний радиус
   кружка) отнимаем проекцию R на ось (R/√2 = R*0.7071) и
   половину габарита точки.                                   */
.enl-important .enl-item-check::after{
  content:"";position:absolute;
  top:  calc(var(--enl-dot) / 2 - var(--enl-dot-border)
             - var(--enl-dot-mark-r) * .7071 - var(--enl-dot-mark) / 2);
  right:calc(var(--enl-dot) / 2 - var(--enl-dot-border)
             - var(--enl-dot-mark-r) * .7071 - var(--enl-dot-mark) / 2);
  width:var(--enl-dot-mark);height:var(--enl-dot-mark);
  border-radius:50%;
  background:var(--enl-accent);
  border:var(--enl-dot-mark-ring) solid #fff;
}

/* отправлено / принято — КРУЖОК ОСТАЁТСЯ, галочки ложатся поверх него.
   Галочки вынесены в отдельные span'ы, потому что ::before/::after кружка
   уже заняты замком, а состояний с двумя значками два. */
.enl-item-check{overflow:visible}
/* Абсолютные потомки считаются от padding-box, то есть ВНУТРИ рамки
   кружка. Вычитаем её толщину, чтобы координаты совпадали с макетом,
   где они заданы от внешнего края.                                  */
.enl-check-mark{
  position:absolute;top:calc(var(--enl-check-top) - var(--enl-dot-border));
  width:var(--enl-check-size);height:var(--enl-check-size);
  pointer-events:none;
}
.enl-check-mark svg{display:block;width:100%;height:100%;overflow:visible}
.enl-check-mark--dark {left:calc(var(--enl-check-dark-x)  - var(--enl-dot-border));color:var(--enl-check-1)}
.enl-check-mark--light{left:calc(var(--enl-check-light-x) - var(--enl-dot-border));color:var(--enl-check-2)}
/* одна галочка: светлой нет, тёмная встаёт на своё отдельное место */
.enl-done .enl-check-mark--light{display:none}
.enl-done .enl-check-mark--dark {left:calc(var(--enl-check-one-x) - var(--enl-dot-border))}

/* Маркер на тексте.
   Две подложки вместо одной:
     1) полоса — тянется по ширине текста, но НЕ до конца:
        останавливается за --enl-marker-gap до последней буквы;
     2) кончик — та же полоса, срезанная по диагонали, как след
        от скошенного пера маркера.

   Обе заданы в пикселях по высоте, а не процентами: процент
   считается от области содержимого строки, а она зависит от метрик
   шрифта — при подстановке запасного полоса бы поехала.        */
.enl-done .enl-item-text,
.enl-accepted .enl-item-text{
  padding-left:var(--enl-marker-lead);
  margin-left:calc(-1 * var(--enl-marker-lead));
  background-image:
    linear-gradient(var(--enl-marker-slant),
                    var(--enl-marker) 50%, transparent 50.5%),
    linear-gradient(var(--enl-marker), var(--enl-marker));
  background-size:
    var(--enl-marker-tip) var(--enl-marker-h),
    calc(100% - var(--enl-marker-gap) - var(--enl-marker-tip)) var(--enl-marker-h);
  background-position:
    right var(--enl-marker-gap) top var(--enl-marker-y),
    left top var(--enl-marker-y);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

/* заблокировано — замок.
   Форма взята из текущего кода (enl-checklist.js): залитый кружок,
   дужка «∩» толщиной 2px со скруглением 4px, корпус со скруглением.

   Что исправлено против исходника: там дужка стояла на top:2px, а
   корпус на bottom:3px — между ними оставался зазор 3-4px, и весь
   значок был смещён вверх. Здесь обе части считаются от ЦЕНТРА
   кружка, поэтому замок центрирован при любом его размере, а ноги
   дужки заходят в корпус на 0.5px и стыкуются без щели.          */
.enl-locked .enl-item-link{pointer-events:none}
.enl-locked .enl-item-check{
  background:var(--enl-lock-bg);
  border-color:var(--enl-lock-border);
}
.enl-locked .enl-item-check::before{        /* дужка */
  content:"";position:absolute;
  top:calc(50% - var(--enl-lock-h) / 2);
  left:50%;transform:translateX(-50%);
  width:var(--enl-lock-arch-w);height:var(--enl-lock-arch-h);
  border:var(--enl-lock-arch-b) solid var(--enl-lock);border-bottom:none;
  border-radius:var(--enl-lock-arch-r) var(--enl-lock-arch-r) 0 0;
  background:transparent;
}
.enl-locked .enl-item-check::after{         /* корпус */
  content:"";position:absolute;
  top:calc(50% - var(--enl-lock-h) / 2 + var(--enl-lock-arch-h) - .5px);
  left:50%;transform:translateX(-50%);
  width:var(--enl-lock-body-w);height:var(--enl-lock-body-h);
  background:var(--enl-lock);border-radius:var(--enl-lock-body-r);
}
.enl-locked .enl-item-title{color:var(--enl-text-muted)}
.enl-locked .enl-item-tag{opacity:.5}



/* ── Стрелки — лежат НА боковых листах ── */
.enl-arrow{
  position:absolute;top:var(--enl-arrow-top);transform:translateY(-50%);
  width:var(--enl-arrow-size);height:var(--enl-arrow-size);
  display:flex;align-items:center;justify-content:center;
  background:var(--enl-arrow-bg);border:1px solid var(--enl-arrow-border);
  border-radius:50%;cursor:pointer;padding:0;margin:0;z-index:2;
  box-sizing:border-box;   /* иначе 51px + рамка = 53px, и кружок съезжает */
  -webkit-appearance:none;appearance:none;
  color:var(--enl-arrow-border);
  transition:transform var(--enl-speed), background var(--enl-speed);
}
/* лист 48px, стрелка 51px → выступает по 1.5px, как в макете */
.enl-arrow--left{left:calc((var(--enl-side-w) - var(--enl-arrow-size)) / 2)}
.enl-arrow--right{right:calc((var(--enl-side-w) - var(--enl-arrow-size)) / 2)}
.enl-arrow:hover{transform:translateY(-50%) scale(1.06)}
.enl-arrow--off{opacity:.3;pointer-events:none}
/* Шеврон отцентрован в самом viewBox: путь 3.5…12.5 по X при ширине 16
   (центр 8) и 2.5…21.5 по Y при высоте 24 (центр 12). Значит flex-центр
   кнопки совпадает с оптическим центром знака. */
.enl-arrow svg{display:block;height:var(--enl-arrow-glyph);width:auto}
.enl-arrow--right svg{transform:scaleX(-1)}

/* ── Мобильный ── */
@media(max-width:768px){
  .enl-checklist-root{
    --enl-side-space:0px; --enl-card-pad-x:18px;
    --enl-size-title:24px; --enl-size-month:16px; --enl-size-dates:16px;
    --enl-size-item:15px; --enl-size-tag:14px; --enl-size-badge:15px;
    /* высоты строк и отступы едут за кеглем — иначе ритм разъедется */
    --enl-lh-month:19px;  --enl-lh-title:27px;  --enl-lh-dates:19px;
    --enl-gap-month:14px; --enl-gap-title:5px;  --enl-gap-dates:12px;
    --enl-gap-divider:16px; --enl-gap-badge:22px; --enl-gap-section:48px;
    --enl-badge-h:26px;   --enl-badge-pad-x:16px;
    /* тег скрыт — колонку под него обнуляем, иначе название
       зря теряло бы 104px на узком экране */
    --enl-tag-zone:0px;
  }
  .enl-side{display:none}          /* боковые листы не помещаются */
  .enl-arrow{width:36px;height:36px;font-size:16px}
  .enl-arrow--left{left:4px}
  .enl-arrow--right{right:4px}
  .enl-item-tag{display:none}      /* дедлайн уходит под текст — решения нет */
}

/* ── Состояния секции ──────────────────────────────────────
   Скелет из HTML-блока показывает «загружаем…», пока скрипт
   тянет данные. Пульсация даёт понять, что процесс идёт.   */
.enl-section-loading{
  font-size:var(--enl-size-item);line-height:var(--enl-item-line);
  color:var(--enl-text-muted);padding:2px 0;
  animation:enl-pulse 1.5s ease-in-out infinite;
}
.enl-section-empty{
  font-size:var(--enl-size-item);line-height:var(--enl-item-line);
  color:var(--enl-text-muted);font-style:italic;padding:2px 0;
}
@keyframes enl-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ── Пункт «пропущенные задания» ───────────────────────────
   В макете его нет — блок долгов появился после отрисовки.
   Оформлен в той же палитре: подложка цвета тега дедлайна,
   пунктирная рамка отделяет его от обычных пунктов.
   Ставится первым пунктом «продвинутой части».             */
/* ⚠️ Отступы НЕ переопределяем — они наследуются от .enl-item-link.
   Своё padding сдвигало кружок вправо от остальных, а margin:0 по
   бокам делал плашку на 24px уже соседних строк. Из-за этого пункт
   читался как выпавший из ряда.
   Рамка 1px компенсируется дополнительным −1px в поле, чтобы
   внутренний край совпал с остальными строками до пикселя. */
.enl-debts-link{
  background:var(--enl-debts-bg);
  border:1px dashed var(--enl-debts-border);
  border-radius:var(--enl-hover-radius);
  margin:calc(-1 * var(--enl-hover-pad-y) - 1px)
         calc(-1 * var(--enl-hover-pad-x) - 1px);
}
/* у этого пункта фон есть всегда, ховер только чуть подчёркивает */
@media (hover:hover){
  .enl-debts-link:hover{background-color:var(--enl-debts-bg);filter:brightness(.97)}
}
.enl-debts-item .enl-item-text{font-weight:600}

/* Кружок с восклицательным знаком.
   Рамка НЕ переопределяется: она берётся из .enl-item-check, то есть
   в точности такая же, как у обычных пунктов — тот же цвет, та же
   толщина, тот же диаметр. Отличается только знак внутри.
   Раньше рамка была цвета --enl-debts-border, светлее остальных,
   и кружок читался как «другой».                                  */
.enl-debts-check{background:#fff}
.enl-debts-check::after{
  content:"!";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:13px;font-weight:600;line-height:1;
  color:var(--enl-text);
}
.enl-debts-arrow{
  flex:0 0 auto;margin-left:auto;font-size:16px;line-height:1;
  color:var(--enl-text);
}

/* Выполнено: те же галочки, что и у обычных заданий.
   Раньше здесь стоял текстовый глиф "✓" — остаток чек-листа
   до макета. Теперь скрипт кладёт в кружок тот же CHECKS, что и
   у остальных пунктов, а CSS остаётся только позиционировать.

   Вариант «выполнено» (одна тёмная галочка), а не «принято»
   (две): долг никто не принимает, ученик просто закрыл его.
   Нужны две — убрать эти две строки, они наследуются сами.   */
.enl-debts-done .enl-check-mark--light{display:none}
.enl-debts-done .enl-check-mark--dark {left:calc(var(--enl-check-one-x) - var(--enl-dot-border))}
/* восклицательный знак под галочкой убираем, иначе просвечивает */
.enl-debts-done .enl-debts-check::after{content:none}
.enl-debts-done .enl-item-text{font-weight:500;color:var(--enl-text-muted)}


/* ══════════════════════════════════════════════════════════
   СТРАНИЦА ДОЛГОВ

   Отдельная страница скрытого подтренинга. Слайдера тут нет —
   лист один, поэтому нет ни боковых листов, ни стрелок.
   Всё остальное берётся из правил выше: карточка, плашки
   секций, кружки статусов, теги дедлайнов, типографика.
   ══════════════════════════════════════════════════════════ */

/* Подпись под заголовком (.enl-debts-sub) описана выше, вместе
   с .enl-slide-dates: у них общее правило, чтобы шрифт не
   разъезжался между чек-листом и долгами.                    */

/* «Невыполненного нет» — не ошибка, а хорошая новость,
   поэтому не серым по краю, а по центру карточки.          */
.enl-debts-empty{
  text-align:center;padding:28px 12px;
  font-size:16px;color:var(--enl-text);
}
/* Надпись «заданий пока нет» встаёт под текст пунктов,
   а не под кружки: 21px кружок + 12px зазор.
   Числа не зашиты — берутся из тех же переменных,
   что задают сам кружок, поэтому не разъедутся. */
.enl-checklist-root .enl-section-empty,
.enl-debts-root .enl-section-empty {
    padding-left: calc(var(--enl-dot) + var(--enl-item-gap));
}

/* =========================================================================
   ЧЕК-ЛИСТ — МОБИЛЬНАЯ ВЕРСИЯ
   Дописать в САМЫЙ КОНЕЦ файла темы «Enl checklist.css»
   01.09.2026
   =========================================================================

   ПОЧЕМУ ДОПИСАТЬ, А НЕ ПРИСЛАТЬ ФАЙЛ ЦЕЛИКОМ

   Живой файл темы и моя копия РАЗОШЛИСЬ: на боевом 36 493 знака, у меня
   35 287. В живом есть правило `.enl-section-empty { padding-left … }`,
   которого в копии нет. Прислав файл целиком, я стёр бы эту правку.
   Поэтому — только добавка в конец.

   ⚠️ ИМЕННО В КОНЕЦ, И ЭТО НЕ ПРИДИРКА. Свой мобильный блок в файле уже
   есть (@media max-width:768px, там же прячутся боковые листы и теги).
   Наш блок имеет ту же силу, а при равной силе побеждает тот, что НИЖЕ.
   Стоя выше, он не сработал бы вовсе.

   ЧТО ДЕЛАЕТ

   1. Стрелки уезжают с пунктов и встают по бокам от строки «с … по …».
   2. Шапка становится компактнее: меньше заголовок, меньше отступы.
   3. Пункты чек-листа идут плотнее.

   Всё — только уже 768px. Компьютер не трогается ничем.

   КООРДИНАТЫ СТРЕЛОК — ОБЕ ТВОИ, И ОБЕ ВЫПОЛНЕНЫ

   По горизонтали: по краям, по обе стороны от строки «с … по …».
   По вертикали:   ровно посередине между низом заголовка «задачи на
                   неделю» и разделительной чертой.

   ⚠️ В первой версии я принял это за два разных значения ОДНОЙ
   координаты и поставил центр строки дат (80) вместо середины
   (86.5). Ошибка разбора: два условия по разным осям — это одна
   точка, а не выбор из двух. Исправлено.

   ЧТО ПРИШЛОСЬ ПОДВИНУТЬ, ЧТОБЫ СЕРЕДИНА ПОМЕСТИЛАСЬ

   На середине стрелка нижним краем упиралась в черту. Замерено при
   исходных числах: середина 84.5, низ круга в той точке, где черта
   действительно есть, 101.47 при черте на 101 — наложение 0.47 px.

   Двигать стрелку было нельзя, это и есть заданная координата.
   Поэтому опущена черта: --enl-gap-dates с 12 до 16. Черта уходит
   вниз на 4, середина — на 2, и просвет становится 1.53 px.
   Проверено перебором четырёх сочетаний размера стрелки и отступа
   прямо на живой странице.

   ЗАМЕРЕНО ПОСЛЕ ПРАВКИ, живая страница курса

   | что                            | было | стало |
   |--------------------------------|------|-------|
   | центр стрелки от верха карточки| 450  | 86.5  |
   | середина заголовок ↔ черта     |  —   | 86.5  |  ← совпали
   | просвет от стрелки до черты    |  —   | 1.53  |
   | высота карточки                | 794  | 720   |  −74 px
   | зазор между пунктами           |  12  |   8   |

   На 320 px: заголовок «задачи на неделю» остаётся в одну строку,
   середина та же 86.5, просвет тот же, до текста дат 52 px. На 390 —
   81 px. Пробный стиль со страницы убран.

   ⚠️ ПОЧЕМУ НЕ ТРОГАЕМ --enl-item-gap. Эта переменная задаёт СРАЗУ ДВА
   расстояния: между пунктами и между кружком и текстом внутри пункта.
   Уменьшив её, мы сдвинули бы текст к кружку. Поэтому расстояние между
   пунктами получает собственное значение, а --enl-item-gap остаётся.
   ========================================================================= */

@media (max-width: 768px) {

  /* --- Размеры шапки --- */
  .enl-checklist-root {
    /* заголовок мельче: было 24/27 */
    --enl-size-title:   21px;
    --enl-lh-title:     24px;

    /* месяц и даты на шаг мельче: было 16/19 */
    --enl-size-month:   15px;
    --enl-lh-month:     18px;
    --enl-size-dates:   15px;
    --enl-lh-dates:     18px;

    /* отступы шапки. было 14 / 5 / 12 / 16 / 22 */
    --enl-gap-month:     8px;
    --enl-gap-title:     3px;
    --enl-gap-dates:    16px;   /* ⚠️ не 10: см. «что пришлось подвинуть» */
    --enl-gap-divider:  14px;
    --enl-gap-badge:    18px;

    /* Высота центра стрелок от верха карточки — ровно середина между
       низом заголовка (68) и разделительной чертой (105):
       (68 + 105) / 2 = 86.5. Замерено, а не выведено. */
    --enl-arrow-top:    86.5px;

    /* расстояние между пунктами. Отдельно от --enl-item-gap,
       см. предупреждение в шапке файла. Было 12. */
    --enl-item-row-gap:  8px;
  }

  /* --- Подушка карточки ---
     В основном правиле она задана числом (padding: 27px … 34px),
     переменной под неё нет. Переопределяем только сверху и снизу,
     боковую оставляем той, что задаёт --enl-card-pad-x. */
  .enl-checklist-root .enl-slide-body {
    padding-top:    18px;
    padding-bottom: 24px;
  }

  /* --- Пункты плотнее --- */
  .enl-checklist-root .enl-items {
    gap: var(--enl-item-row-gap);
  }

  /* --- Стрелки ---
     Высоту задаёт --enl-arrow-top выше. Здесь только размер и то,
     насколько они отодвинуты от краёв.

     ⚠️ Боковых листов на телефоне нет — их прячет основной мобильный
     блок. Поэтому стрелки прижимаются к краям слайдера, а не к листам,
     и отступ считается от края, а не по формуле с --enl-side-w. */
  .enl-checklist-root .enl-arrow {
    width:  34px;
    height: 34px;
  }
  /* ⚠️ Размер не уменьшен намеренно. Стрелку 32 px просвет тоже
     пропускал, но она и так уже меньше пальца; лучше опустить черту
     на 4 px, чем сделать кнопку ещё мельче. */
  .enl-checklist-root .enl-arrow--left  { left:  2px; }
  .enl-checklist-root .enl-arrow--right { right: 2px; }
}